<script setup>
import { RouterLink, useRoute, RouterView } from 'vue-router'
import axios from 'axios'
import { reactive, ref, nextTick, onUpdated, watch } from 'vue'
let data = ref([])
// 数据地址
let Url = ''
// 获取数据函数
const getData = () => {
  Url = route.params.type === 'onPlaying' ? 'https://m.maizuo.com/gateway?cityId=500100&pageNum=1&pageSize=10&type=1&k=4172687' : 'https://m.maizuo.com/gateway?cityId=500100&pageNum=1&pageSize=10&type=2&k=2723215'
  axios.get(Url, {
    headers: {
      'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"17486109322267807156797441","bc":"500100"}',
      'X-Host': 'mall.film-ticket.film.list'
    }
  }).then(res => {
    data.value = res.data.data.films
    console.log(data.value)
  })
}
const route = useRoute()
// 初始化获取数据
getData()
// 监听路由获取数据，刷新页面
watch(route, () => {
  getData()
})

</script>

<template>
  <header class="head">
    <RouterLink to="/film/onPlaying">正在热播</RouterLink>
    <RouterLink to="/film/beforePlaying">即将上映</RouterLink>
  </header>
  <main>
    <ul>
      <li v-for="item in data" :key="item" @click="$router.push({ name:'filmdetails', params: { filmId :item.filmId}})">
          <img :src="item.poster" alt="">
          <div>
            <section><span class="name">{{ item.name }}</span><span>{{ item.filmType.name }}</span></section>
            <section>观众评分：{{ item.grade }}</section>
            <section>主演：<b v-for="item1 in item.actors" :key="item1">{{ item1.name }}</b></section>
            <section>{{ item.nation }}&nbsp;|&nbsp;{{ item.runtime }}分钟</section>
          </div>
          <button v-if="item.isPresale">购票</button>
      </li>
    </ul>
  </main>
</template>

<style lang="scss" scoped>
header{
  width: 100vw;
  height: .5rem;
  text-align: center;
  display: flex;
  justify-content: space-around;
  background-color: white;
  box-shadow: 0 0 5px 0 rgba(0,0,0,.6);
  position: fixed;
  top: 0;
  left: 0;
  a{
    font: normal 600 20px/.5rem "楷体";
    font-size: .22rem;
    color: rgb(0, 0, 0);
  }
  .router-link-active{
    border-bottom: 2px solid red;
    color: red;
  }
}
main{
  padding-bottom: .5rem;
}
ul{
  margin-top: .5rem;
  li {
  height: 1.24rem;
  width: 100%;
  padding: 15px;
  font-size: .16rem;
  display: flex;
  justify-content: space-between;
  align-items: center;

  img {
    width: .66rem;
    height: .99rem;
    margin-right: .1rem;
  }

  div {
    width: 2.19rem;

    section {
      color: #797d82;
      font-size: 13px;
      height: 22px;
      line-height: 22px;
      margin-right: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      background-color: white;

      .name {
        max-width: calc(100% - 25px);
        color: #191a1b;
        font-size: 16px;
        height: 22px;
        line-height: 22px;
        margin-right: 5px;
        background-color: white;
      }

      span {
        font-size: 9px;
        color: #fff;
        background-color: #d2d6dc;
        height: 14px;
        line-height: 14px;
        padding: 0 2px;
        border-radius: 2px
      }
    }
  }

  button {
    width: .5rem;
    height: .25rem;
    border: 1px solid #ff5f16;
    background-color: #fff;
    color: #ff5f16;
    ;
  }

  img,
  div,
  button {
    user-select: none;
  }
}
}
</style>
